<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>vue-todo-demo</title>
    <style type="text/css">
    	.edit{
    display:block ;
    width:80%;
    height: 35px;
    line-height: 35px;
    margin: 30px auto;
    box-sizing: border-box;
    padding-left: 4px;
    border-radius: 4px;
    border:1px solid #ccc;
    outline: 0;
    box-shadow: 0 0 5px #ccc;
 }
 .list{
    margin: 0 auto;
    width:80%;
 }
 .unit{
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #efefef;
 }
 .unit:last-child{
    border-bottom: 0;
 }
  .finish{
    text-decoration: line-through;
    color: #ccc;
 }
  .del{
    background: red;
    text-decoration: none;
    position: absolute;
    right:0;
    font-size: 12px;
    border: 0;
    outline: 0;
    padding: 2px 5px;
    border-radius: 5px;
    color: #fff;
 }
  .empty{
    font-size: 13px;
    color: #ccc;
    text-align: center;
    padding: 10px 0;
 }
    </style>
   
 </head>
<body>
	<div id="app">
		<input type="text" class="edit" v-model="task.content" placeholder="编写任务" @keydown.enter="addTask">
		<p class="empty" v-if="list.length===0">暂无任务</p>
		<div class="list">
			<div class="unit" v-for="(item,index) in list">
				<input @click="changeState(index)" :checked="item.finished" type="checkbox">
				<span :class="{'finish':item.finished}">{{item.content}}</span>
				<button @click="removeTask(index)" class="del">删除</button>
			</div>
		</div>
	</div>
	 <script src="js/vue.min.js"></script>
	<script>
		const app=new Vue({
			el:"#app",
			data:{
				task:{
					content:'',
					finished:false,
					deleted:false
				},
				list:[]
			},
			methods:{
				addTask:function(){
					this.list.push(this.task);
					this.task={
						content:'',
						finished:false,
						deleted:false
					}
				},
				changeState:function(index){
					let curState=this.list[index].finished;
					this.list[index].finished=!curState;
				},
				removeTask:function(index){
					this.list.splice(index,1);
				}

			}
		});
	</script>
</body>
</html>


